| vue3零基础入门教程01 初体验 | 您所在的位置：网站首页 › vue入门书籍 知乎 › vue3零基础入门教程01 初体验 |
vue3零基础入门教程01 初体验
|
概述 vue3出来有很长的时间了，目前可以查到的vue3教程也非常多，为了便于后面的学习，复习和参考，笔者也策划了《vue3零基础入门教程》系列文章，供大家参考。 本篇文章的知识点CDN方式引入vue3 本地方式引入vue3 计数器案例的原生实现 计数器案例的vue3实现 CDN引入所谓CDN引入，其实也就是引入存放在一些离自己所处地较近的，互联网可访问的，服务器商店静态资源，比如vue的js文件。 通过以下代码，可以引入CDN的vue js文件： 核心还是在于地址：https://unpkg.com/vue@next 我们可以直接通过浏览器访问这个地址，然后ctrl + s保存该文件，作为后面的本地引入的js文件的源码。 引入vue以后，我们就可以简单的使用了。要使用vue，需要实现以下条件： 1、在HTML中存在一个dom元素，用于存放vue的渲染结果 2、引入vue js源码 3、创建vue的template模板 4、创建vue的实例，参数是一个对象，该对象有template属性指定模板 5、将vue实例挂载到dom元素上 dom元素的声明非常简单，代码如下： HelloWorld引入vue js源码，直接使用CDN即可： 创建vue的template模板，目前使用简单的方式，代码如下： constoptions={ template:'HelloWorld' }创建vue的实例，代码如下： constapp=Vue.createApp(options);将vue的实例挂载到dom元素，代码如下： app.mount("#app")完整代码如下： Document HelloWorld constoptions={ template:'HelloWorld' } constapp=Vue.createApp(options); app.mount("#app") 本地引入直接通过浏览器访问 https://unpkg.com/vue@next ，然后ctrl + s保存该文件，作为本地引入的js文件的源码。 Document Vue.createApp({ template:`你好啊,李银河` }).mount("#app"); 计数器案例原生实现计数器介绍： 存在一个dom元素，展示一个数字 存在两个按钮，一个增加按钮，点击以后，该数字增加；一个减少按钮，点击该按钮以后数字减少。 原生JS实现步骤： 1、定义展示数字的dom元素 2、定义两个按钮，增加按钮和减少按钮 3、编写JS代码 3.1 获取所有元素 3.2 定义一个变量，存储一个数字，并让dom元素展示该数字 3.3 监听增加按钮的点击事件，该变量加1，然后赋值给dom元素 3.4 监听减少按钮的点击事件，该变量减1，然后复制给om元素 实现后界面效果如下：
HTML代码如下： 0 增加 减少CSS代码如下： *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1pxsolid#ccc; margin:10pxauto; line-height:400px; text-align:center; } .btns{ text-align:center; } .btnsbutton{ margin:5px; padding:15px; }JS代码如下： //1.获取所有的元素 constcounterEl=document.querySelector(".counter"); constincrementEl=document.querySelector(".increment"); constdecrementEl=document.querySelector(".decrement"); //2.定义变量 letcounter=100; counterEl.innerHTML=counter; //3.监听按钮的点击 incrementEl.addEventListener("click",()=>{ counter+=1; counterEl.innerHTML=counter; }); decrementEl.addEventListener("click",()=>{ counter-=1; counterEl.innerHTML=counter; });完整代码： Document *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1pxsolid#ccc; margin:10pxauto; line-height:400px; text-align:center; } .btns{ text-align:center; } .btnsbutton{ margin:5px; padding:15px; } 0 增加 减少 //1.获取所有的元素 constcounterEl=document.querySelector(".counter"); constincrementEl=document.querySelector(".increment"); constdecrementEl=document.querySelector(".decrement"); //2.定义变量 letcounter=100; counterEl.innerHTML=counter; //3.监听按钮的点击 incrementEl.addEventListener("click",()=>{ counter+=1; counterEl.innerHTML=counter; }); decrementEl.addEventListener("click",()=>{ counter-=1; counterEl.innerHTML=counter; }); 计数器案例vue3实现之前我们用原生JS实现了一个计数器案例，那么使用vue3又该如何实现呢？ 完整代码： Document *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1pxsolid#ccc; margin:10pxauto; line-height:400px; text-align:center; } .btns{ text-align:center; } .btnsbutton{ margin:5px; padding:15px; } {{counter}} 增加 减少 constapp=Vue.createApp({ template:"#main", data(){ return{ counter:100 } }, //定义各种各样的方法 methods:{ increment(){ console.log("点击了+1"); this.counter++; }, decrement(){ console.log("点击了-1"); this.counter--; } } }) app.mount('#app'); 另一种template写法使用如下方式，也可以编写模板代码： {{counter}} 增加 减少完整代码： Document *{ margin:0; padding:0; } .box{ width:600px; height:400px; border:1pxsolid#ccc; margin:10pxauto; line-height:400px; text-align:center; } .btns{ text-align:center; } .btnsbutton{ margin:5px; padding:15px; } {{counter}} 增加 减少 constapp=Vue.createApp({ template:"#main", data(){ return{ counter:100 } }, //定义各种各样的方法 methods:{ increment(){ console.log("点击了+1"); this.counter++; }, decrement(){ console.log("点击了-1"); this.counter--; } } }) app.mount('#app'); |
【本文地址】